<template>
  <div>
    <div class="container">
      <p class="title">{{ $t("核心技术") }}</p>
      <div
        class="technology-box"
        v-for="item in aboutTechnologyData"
        :key="item.id"
        :id="'content' + item.id"
      >
        <div class="image-box">
          <img :src="item.thumb" alt="" class="main-image" />
          <p
            class="image-text"
            :style="{
              fontSize: item.title_size + 'rem',
              color: item.title_color,
            }"
          >
            {{ item.title }}
          </p>
        </div>
        <div class="items" v-for="product in item.list" :key="product.id">
          <div class="image">
            <img :src="product.thumb" alt="" />
          </div>
          <p class="name">{{ product.title }}</p>
          <el-tooltip effect="dark" :content="product.content" placement="top">
            <p class="info">{{ product.content }}</p>
          </el-tooltip>
        </div>
      </div>
    </div>
    <div class="container_mobile">
      <p class="title">{{ $t("核心技术") }}</p>
      <div
        class="technology-box"
        v-for="item in aboutTechnologyData"
        :key="item.id"
        :id="'content_mobile' + item.id"
      >
        <div class="main-image-box">
          <img :src="item.thumb" alt="" class="main-image" />
          <p
            class="main-title"
            :style="{
              fontSize: item.title_size + 'rem',
              color: item.title_color,
            }"
          >
            {{ item.title }}
          </p>
        </div>
        <div class="items">
          <div class="over">
            <div
              class="item-box"
              v-for="product in item.list"
              :key="product.id"
            >
              <div class="floor"></div>
              <img :src="product.wap_thumb" alt="" />
              <div class="text-box">
                <p class="name">{{ product.title }}</p>
                <p class="info">{{ product.content }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    aboutTechnologyData: {
      type: Array,
    },
  },
  data() {
    return {
      indexSwiperOption: {
        //指示点
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        loop: false,
        slidesPerView: 2,
        spaceBetween: 10,
        speed: 800,
        centeredSlidesBounds: true,
        centeredSlides: true,
      },
    };
  },
  mounted() {
    if (this.$route.query.id) {
      setTimeout(() => {
        if (this.$store.state.isMobile) {
          document
            .querySelector("#content_mobile" + this.$route.query.id)
            .scrollIntoView({
              behavior: "smooth",
            });
        } else {
          document
            .querySelector("#content" + this.$route.query.id)
            .scrollIntoView({
              behavior: "smooth",
            });
        }
      }, 100);
    }
  },
};
</script>

<style lang="less" scoped>
@media (min-width: 900px) {
  .container_mobile {
    display: none;
  }
  .container {
    display: block;
    padding: 100rem 100rem 150rem 100rem;

    .title {
      font-size: 54rem;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #333333;
      text-align: center;
      margin: 0;
    }

    .technology-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 100rem;
      overflow: hidden;

      .image-box {
        width: 100%;
        height: 700rem;
        overflow: hidden;
        margin-bottom: 40rem;
        border-radius: 20rem;
        position: relative;

        .image-text {
          position: absolute;
          left: 300rem;
          top: 300rem;
        }
      }

      .main-image {
        width: 100%;
        height: 101%;
        transition: 0.6s;

        &:hover {
          transform: scale(1.2);
        }
      }
      .items {
        display: flex;
        flex-direction: column;
        align-items: center;

        .image {
          width: 546rem;
          height: 350rem;
          background: #f7f7f7;
          border-radius: 20rem;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          &:hover {
            img {
              transform: scale(1.2);
            }
          }

          img {
            height: 100%;
            width: 100%;
            transition: 0.6s;
          }
        }

        .name {
          font-size: 28rem;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #333333;
          margin: 0;
          margin-top: 36rem;
          margin-bottom: 14rem;
        }
        .info {
          width: 546rem;
          font-size: 20rem;
          font-family: Source Han Sans CN;
          font-weight: 300;
          color: #999999;
          margin: 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
@media (max-width: 900px) {
  .container {
    display: none;
  }
  .container_mobile {
    display: block;
    padding: 20px 0;

    .title {
      font-size: 20px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #333333;
      text-align: center;
      margin: 0;
    }

    .technology-box {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 24px;

      .main-image-box {
        width: 100%;
        position: relative;
        .main-image {
          width: 100%;
          object-fit: cover;
          margin-bottom: 20px;
        }
        .main-title {
          position: absolute;
          top: 30%;
          left: 30px;
          font-size: 20px !important;
          font-family: Source Han Sans CN;
        }
      }

      .items {
        overflow-x: auto;
        overflow-y: scroll;

        .over {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 0 20px;

          .item-box {
            flex: none;
            width: 275px;
            height: 381px;
            display: flex;
            align-items: center;
            flex-direction: column;
            gap: 10px;
            position: relative;

            .floor {
              width: 100%;
              height: 50%;
              bottom: 0;
              left: 0;
              position: absolute;
              background: linear-gradient(to top, #000, #000, rgba(0, 0, 0, 0));
              border-radius: 7px;
            }

            img {
              width: 100%;
              height: 100%;
              border-radius: 7px;
            }
            .text-box {
              width: 100%;
              position: absolute;
              bottom: 50px;
              left: 0;
              z-index: 1;
              display: flex;
              flex-direction: column;
              align-items: center;
              padding: 0 20px;
              box-sizing: border-box;
              gap: 10px;

              .name {
                font-size: 16px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #fff;
                margin: 0;
              }
              .info {
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #999999;
                margin: 0;
              }
            }
          }
        }
      }
      .items::-webkit-scrollbar {
        display: none;
      }
    }
  }
}
</style>
